import React, { useEffect } from 'react';
import AgentService from '@/modules/Agent';
import { Tooltip, Divider } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import { useStream } from '../Context/StreamContext';
import { replaceStream } from '@/store/reducers/stream';
import { useDispatch } from 'react-redux';
import Message from '@/utils/message';
import useSyncState from '../hooks/useSyncState';

const DeviceEnum = (props: { mode: 'audio' | 'video'; id: string | number | undefined }) => {
	const { mode = 'audio', id = '' } = props;
	const { streams, setAudioInput, setAudioOutput, setVideoInput, audioInput, audioOutput, videoInput } = useStream();

	const switchDevice = async (id: string, mode: string) => {
		if (mode === 'audioInput') {
			if (props.id) {
				await AgentService.updateStreamWithDeviceID(props.id.toString(), id);
				const device = AgentService.findDeviceWithDevicID(id);
				Message.normal(`已切换至麦克风 ${device?.label}`);
				setAudioInput(device?.deviceId);
			}
		} else if (mode === 'audioOutput') {
			streams().map(async item => await AgentService.switchSpeaker(item.id!, id));
			const device = AgentService.findDeviceWithDevicID(id);
			if (device) {
				Message.normal(`已切换至扬声器 ${device.label}`);
				setAudioOutput(device.deviceId);
			}
		} else {
			if (props.id) {
				await AgentService.updateStreamWithDeviceID(props.id.toString(), id);
				const device = AgentService.findDeviceWithDevicID(id);
				Message.normal(`已切换至视频源 ${device?.label}`);
				setVideoInput(device?.deviceId);
			}
		}
	};

	const showToolTip = (e: any) => {
		if (e.target.clientWidth >= e.target.scrollWidth) {
			e.target.style.pointerEvents = 'none'; // 阻止鼠标事件
		}
	};

	const getSwitchItem = (mode: string) => {
		if (mode === 'audio') {
			return (
				<>
					<p className="sub-title">选择麦克风</p>
					<ul>
						{AgentService.getAudioDevices().length > 0 ? (
							AgentService.getAudioDevices().map(item => (
								<li key={item.deviceId} onClick={() => switchDevice(item.deviceId, 'audioInput')}>
									<span className="selected">{item.deviceId === audioInput() ? <CheckOutlined style={{ color: '#C1C1C1' }} /> : null}</span>
									<Tooltip placement="bottom" overlayClassName={'device-enum-tool-tip'} showArrow={false} title={item.label}>
										<p onMouseEnter={showToolTip}>{item.label}</p>
									</Tooltip>
								</li>
							))
						) : (
							<p>无可用设备</p>
						)}
					</ul>
					<Divider className="device-divider" />
					<p className="sub-title">选择扬声器</p>
					<ul>
						{AgentService.getSpeakerDevices().length > 0 ? (
							AgentService.getSpeakerDevices().map(item => (
								<li key={item.deviceId} onClick={() => switchDevice(item.deviceId, 'audioOutput')}>
									<span className="selected">{item.deviceId === audioOutput() ? <CheckOutlined style={{ color: '#C1C1C1' }} /> : null}</span>
									<Tooltip placement="bottom" overlayClassName={'device-enum-tool-tip'} showArrow={false} title={item.label}>
										<p onMouseEnter={showToolTip}>{item.label}</p>
									</Tooltip>
								</li>
							))
						) : (
							<p className="empty">无可用设备</p>
						)}
					</ul>
				</>
			);
		} else {
			return (
				<>
					<p className="sub-title">选择视频源</p>
					<ul>
						{AgentService.getVideoDevices().length > 0 ? (
							AgentService.getVideoDevices().map(item => (
								<li key={item.deviceId} onClick={() => switchDevice(item.deviceId, 'videoInput')}>
									<span className="selected">{item.deviceId === videoInput() ? <CheckOutlined style={{ color: '#C1C1C1' }} /> : null}</span>
									<Tooltip placement="bottom" overlayClassName={'device-enum-tool-tip'} showArrow={false} title={item.label}>
										<p onMouseEnter={showToolTip}>{item.label}</p>
									</Tooltip>
								</li>
							))
						) : (
							<p className="empty">无可用设备</p>
						)}
					</ul>
				</>
			);
		}
	};

	return <div className="device-enum-wrapper">{getSwitchItem(mode)}</div>;
};

export default DeviceEnum;
